<template>
  <div>
    <!-- 面包屑 -->
    <Bread1 :breadtitle="breadtitle"></Bread1>

    <!-- 添加分类按钮 -->
    <div class="button">
      <a-button type="primary" @click="openAddSort"> 添加分类 </a-button>
    </div>

    <!-- 表格部分 -->
    <tree-table
      border
      show-index
      :data="cateList"
      :columns="columns"
      :selection-type="false"
      :expand-type="false"
    >
      <!-- 是否有效 -->
      <template slot="isok" slot-scope="scope">
        <a-icon
          type="check-circle"
          v-if="scope.row.cat_deleted === false"
          :style="{ fontSize: '22px', color: '#52c41a' }"
        />
        <a-icon
          type="close-circle"
          v-else
          :style="{ fontSize: '22px', color: '#08c' }"
        />
      </template>
      <!-- 排序 -->
      <template slot="order" slot-scope="scope">
        <a-tag v-if="scope.row.cat_level === 0" color="#2db7f5"> 一级 </a-tag>
        <a-tag v-else-if="scope.row.cat_level === 1" color="#87d068">
          二级
        </a-tag>
        <a-tag v-else color="#108ee9"> 三级 </a-tag>
      </template>
      <!-- 操作 -->
      <template slot="opp" slot-scope="scope">
        <a-space
          ><a-button type="primary" @click="alter(scope)"> 修改 </a-button>
          
          <a-popconfirm
            title="是否删除?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="confirm(scope)"
          >
            <a-button type="danger" class="danger"> 删除 </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </tree-table>

    <!-- 分页 -->
    <a-pagination
      class="pagination"
      v-model="querInfo.pagenum"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="querInfo.pagesize"
      @showSizeChange="onShowSizeChange"
      @change="pagChabge"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
        <span v-if="props.value === '50'">全部</span>
      </template>
    </a-pagination>

    <!-- 添加分类 -->
    <AddSort ref="addsort" @refiresh="getCateList()"></AddSort>

    <!-- 修改分类 -->
    <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
      <a-form-model :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item label="商品Id">
          <a-input v-model="cateAlter.cat_id" disabled />
        </a-form-model-item>
        <a-form-model-item label="所修改的名称">
          <a-input v-model="cateAlter.cat_name" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import Bread1 from "@/components/bread/Bread1";
import { reqGoodList, reqCatealter, reqCatesu,reqCatedel } from "@/api/index";
// import { mapState } from "vuex";
//引入添加分类
import AddSort from "@/views/goods/cates/compontents/AddSort";
export default {
  data() {
    return {
      breadtitle: ["商品管理", "商品分类"],
      //商品查询条件参数
      querInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      pageSizeOptions: ["5", "7", "10"],
      //保存数据
      cateList: [],
      //页数
      total: 0,
      //!为table属性指定列的定义
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          type: "template",
          template: "isok",
        },
        {
          label: "排序",
          type: "template",
          template: "order",
        },
        {
          label: "操作",
          type: "template",
          template: "opp",
          align: "center",
          headerAlign: "center",
          width: "300px",
        },
      ],
      // 修改数据
      cateAlter: {},
      visible: false,
      cat_name: "",
    };
  },
  components: { Bread1, AddSort },
  computed: {
    // ...mapState({
    //   cateList: (state) => state.goods.cateList || [],
    // }),
  },
  created() {
    //发起表格数据网络请求
    this.getCateList();
  },
  methods: {
    // 派发表格数据网络请求
    async getCateList() {
      let res = await reqGoodList(this.querInfo);
      if (res.meta.status == 200) {
        this.cateList = res.data.result;
        this.total = res.data.total;
      }
    },
    //页数5/7/10改变时
    onShowSizeChange(page, pageSize) {
      this.querInfo.pagesize = pageSize;
      this.getCateList();
    },
    //页码改变的时候
    pagChabge(page, pageSize) {
      // console.log(page);
      this.querInfo.pagenum = page;
      this.getCateList();
    },
    // 打开添加分类
    openAddSort() {
      this.$refs.addsort.visible = true;
      this.$refs.addsort.getParentCateList();
    },
    // 修改分类
    async alter(scope) {
      let res = await reqCatealter(scope.row.cat_id);
      if (res.meta.status == 200) {
        this.cateAlter = res.data;
      }
      this.visible = true;
    },
    // 修改按钮确定
    async handleOk(e) {
      let res = await reqCatesu(this.cateAlter);
      console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.warning("更新失败！");
      }
      this.$message.success("更新成功！");
      this.getCateList();
      this.visible = false;
    },
    //删除
    async confirm(scope){
      let res=await reqCatedel(scope.row.cat_id)
      if (res.meta.status !== 200) {
        return this.$message.warning("删除失败！");
      }
      this.$message.success("更新成功！");
      this.getCateList();
    }
  },
};
</script>

<style lang="less" scoped>
.button {
  padding: 0 0 10px 30px;
}
.pagination {
  text-align: center;
  padding-top: 15px;
}
</style>